<template>
  <div class="comment">
    <div class="evaluation df aic">
      <div class="comprehensive df fdc jcc aic">
        <span class="fenshu mb10">5.0</span>
        <span class="zonghe mb10">综合评分</span>
        <span class="gaoyu">高于周边商家96%</span>
      </div>
      <div class="comprehensiveStar">
        <p class="df aic">
          <span class="textTime">服务态度</span>
          <van-rate
            v-model="value1"
            :size="16"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
        </p>
        <p class="df aic">
          <span class="textTime">菜品质量</span>
          <van-rate
            v-model="value1"
            :size="16"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
        </p>
        <p class="df aic">
          <span class="textTime">送达时间</span>
          <span>20分钟</span>
        </p>
      </div>
    </div>
    <van-tabs type="card" class="card f1">
      <van-tab class="totalEvaluation" :title="`全部${ratingList.length}`">
        <!-- 商品信息 -->
        <div class="contentCard fn">
          <div
            v-for="item in ratingList"
            :key="item.index"
            class="totalE df jcsb"
          >
            <div class="df">
              <!-- 头像 -->
              <van-image
                class="image"
                round
                width="60px"
                height="60px"
                :src="item.avatar"
              />
              <!-- 信息 -->
              <div class="rightText van-ellipsis">
                <div class="df jcsb">
                  <div class="name">{{ item.username }}</div>
                  <!-- <van-count-down
                    time="time"
                    format="DD 天 HH 时 mm 分 ss 秒"
                  /> -->
                </div>
                <div class="deliveryTime df aic">
                  <van-rate
                    :value="item.score"
                    class="van-rate"
                    size="25"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                  {{ item.deliveryTime }}分钟送达
                </div>
                <div class="text">{{ item.text }}</div>
                <div class="recommendBtn">
                  <van-button
                    v-for="item in item.recommend"
                    :key="item"
                    class="button"
                    type="default"
                  >
                    {{ item }}
                  </van-button>
                </div>
                <van-divider />
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab :title="`满意${goodRateList.length}`">
        <!-- 商品信息 -->
        <div class="contentCard fn">
          <div
            v-for="item in goodRateList"
            :key="item.index"
            class="totalE df jcsb"
          >
            <div class="df">
              <!-- 头像 -->
              <van-image
                class="image"
                round
                width="60px"
                height="60px"
                :src="item.avatar"
              />
              <!-- 信息 -->
              <div class="rightText van-ellipsis">
                <div class="df jcsb">
                  <div class="name">{{ item.username }}</div>
                  <!-- <van-count-down
                    time="time"
                    format="DD 天 HH 时 mm 分 ss 秒"
                  /> -->
                </div>
                <div class="deliveryTime df aic">
                  <van-rate
                    :value="item.score"
                    class="van-rate"
                    size="25"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                  {{ item.deliveryTime }}分钟送达
                </div>
                <div class="text">{{ item.text }}</div>
                <div class="recommendBtn">
                  <van-button
                    v-for="item in item.recommend"
                    :key="item"
                    class="button"
                    type="default"
                  >
                    {{ item }}
                  </van-button>
                </div>
                <van-divider />
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab :title="`不满意${badRateList.length}`">
        <!-- 商品信息 -->
        <div class="contentCard fn">
          <div
            v-for="item in badRateList"
            :key="item.index"
            class="totalE df jcsb"
          >
            <div class="df">
              <!-- 头像 -->
              <van-image
                class="image"
                round
                width="60px"
                height="60px"
                :src="item.avatar"
              />
              <!-- 信息 -->
              <div class="rightText van-ellipsis">
                <div class="df jcsb">
                  <div class="name">{{ item.username }}</div>
                  <!-- <van-count-down
                    time="time"
                    format="DD 天 HH 时 mm 分 ss 秒"
                  /> -->
                </div>
                <div class="deliveryTime df aic">
                  <van-rate
                    :value="item.score"
                    class="van-rate"
                    size="25"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                  {{ item.deliveryTime }}分钟送达
                </div>
                <div class="text">{{ item.text }}</div>
                <div class="recommendBtn">
                  <van-button
                    v-for="item in item.recommend"
                    :key="item"
                    class="button"
                    type="default"
                  >
                    {{ item }}
                  </van-button>
                </div>
                <van-divider />
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {mapActions, mapState, mapGetters} from 'vuex'

export default {
  data() {
    return {
      value: '',
      value1: 4.5,
    }
  },
  computed: {
    ...mapState('shop', ['ratingList']),
    ...mapGetters('shop', ['goodRateList', 'badRateList']),
  },
  methods: {
    ...mapActions('shop', ['A_getRatingsReq']),
  },
  created() {
    this.A_getRatingsReq()
  },
}
</script>

<style lang="scss" scoped>
.evaluation {
  padding: 20px;
  height: 240px;
  background: #fff;
  margin-bottom: 20px;
  .comprehensive {
    margin-left: 20px;
    margin-right: 20px;
    padding-right: 30px;
    border-right: 1px solid #ccc;

    .fenshu {
      font-size: 30px;
      font-weight: 700;
      color: #ffc107;
    }
    .zonghe {
      font-size: 20px;
      color: #000000;
    }
    .gaoyu {
      color: rgb(109, 109, 109);
    }
  }
  .textTime {
    margin-right: 10px;
  }
}
.comment {
  height: 100%;
  background: #f6f6f6;
}
.card {
  height: 100%;
  padding: 20px;
  background: #fff;
  overflow: scroll;
  .totalEvaluation {
    margin-top: 20px;
    padding-bottom: 40px;
  }
}
.contentCard {
  padding-bottom: 40px;
  margin-top: 20px;
}
.totalE {
  padding: 0px 10px;
  margin-bottom: 20px;
  overflow: hidden;
  // border: 1px solid palevioletred;

  .rightText {
    margin-left: 10px;
    div {
      margin-bottom: 10px;
    }
    .recommendBtn {
      .button {
        font-size: 12px !important;
        height: 34px;
        padding: 4px 10px;
        color: #ccc;
        margin-right: 4px;
      }
    }
    .van-rate {
      bottom: 0;
      margin-right: 10px;
    }
  }
}
.text {
  word-wrap: break-word;
  overflow: hidden;
}

:deep(.van-tab--active) {
  color: #fff;
  background: #ffc107 !important;
}
:deep(.van-tab) {
  color: #ffc107;
  border-right: 1px solid #ffc107 !important;
}
:deep(.van-tabs__nav--card) {
  border: 1px solid #ffc107;
}
:deep(.van-tabs__nav--card) {
  border: 1px solid #ffc107;
}
</style>
